<template>
  <view class="multiple-wrapper">
    <view class="text">PK</view>
    <view class="h3">{{ stem }}</view>
    <view
      v-for="(item, index) in dataList"
      :key="item.id"
      class="multiple-item"
      :style="{
        backgroundColor:
          answerFlag === false && showSubmitBtn && !isFinish ? '#f8f9fb' : '',
      }"
      @click="checkedClick(index)"
    >
      <view
        :style="{ width: `${item.percent}%`, fontWeight: 500 }"
        class="percent"
      />
      <view class="desc-box">
        <view>
          <!-- 当活动未结束，用户没有选择的情况下，显示未选中样式 -->
          <view v-if="!item.isChecked && !isFinish" class="checkbox-box" />
          <!-- 当活动未结束，用户选择的情况下，显示选中样式 -->
          <view
            v-if="item.isChecked && !isFinish"
            class="box-img"
            :style="{ opacity: disable ? 0.5 : 1 }"
          >
            <img src="../images/selected.png" alt="" />
          </view>
        </view>
        <!-- 要么未结束的情况用户选择了，要么已结束的情况下用户曾经选择了 -->
        <view
          :style="{
            color:
              (!isFinish && item.isChecked) || (isFinish && item.userChecked)
                ? '#3F60FC'
                : '#07132b',
          }"
          class="option-name"
        >
          {{ item.optionName }}
        </view>
        <view
          class="value"
          :style="{
            color:
              (isFinish && item.userChecked) || item.isChecked
                ? '#3F60FC'
                : '#07132b',
          }"
        >
          {{ Math.ceil(item.percent) }}%
        </view>
      </view>
    </view>
    <!-- 活动未结束，用户未选择，显示提示项 -->
    <view
      v-if="
        answerFlag === false && !isFinish && selectNum < choiceChooseCountMin
      "
      class="select-limit"
    >
      您可选择{{ choiceChooseCountMin }}-{{ choiceChooseCountMax }}项
    </view>
    <view class="expiration-date-multiple">
      <view class="span">* </view>
      <view v-if="isFinish"> 本次PK已结束 </view>
      <view v-else> 将于 {{ endTime }} 截止 </view>
    </view>
    <!-- 按钮显示条件：用户未选择，未点击提交按钮，答题未结束 -->
    <view
      v-if="answerFlag === false && showSubmitBtn && !isFinish"
      :style="{
        backgroundColor: selectNum > choiceChooseCountMin ? '#3F60FC' : '',
      }"
      class="sumbit-btn"
      @click="handleClick"
    >
      提交
    </view>
  </view>
</template>

<script>
export default {
  props: {
    endTime: {
      type: String,
      default: "",
    },
    pkQuestionInfo: {},
    endFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      stem: "",
      answerFlag: false,
      isFinish: false,
      sumCount: 0,
      id: 0,
      selectNum: 0,
      showSubmitBtn: true,
      dataList: [],
      disable: false,
      choiceChooseCountMax: 0,
      choiceChooseCountMin: 0,
      _sumCount: 0,
      _addSumCount: 0,
    };
  },
  methods: {
    checkedClick(index) {
      if (!getLoginStatus()) {
        uni.navigateTo({
          url: `/pages/login/index?backUrl=${encodeURIComponent(
            getCurrentPath()
          )}`,
        });
        return;
      }
      if (this.isFinish || this.disable) {
        return;
      }
      if (this.dataList[index].isChecked) {
        this.dataList[index].isChecked = false;
        const userIsSelect = this.dataList.findIndex(
          (item) => item.isChecked === true
        );
        // userIsSelect === -1 当前用户没有选中任何一项，则当前总数应该为原先的数量
        if (userIsSelect === -1) {
          this.sumCount = this._sumCount;
        }
        this.selectNum -= 1;
        this.dataList[index].userCount -= 1;
        this.dataList =
          this.sumCount === 0
            ? this.dataList.map((dataItem) => {
                return {
                  ...dataItem,
                  percent: 0,
                };
              })
            : this.dataList.map((dataItem) => {
                return {
                  ...dataItem,
                  percent: (dataItem.userCount / this.sumCount) * 100,
                };
              });
      } else {
        this.selectNum += 1;
        if (this.selectNum > this.choiceChooseCountMax) {
          this.selectNum -= 1;
          return;
        }
        this.dataList[index].isChecked = true;
        const userIsSelect = this.dataList.findIndex(
          (item) => item.isChecked === true
        );
        // userIsSelect !== -1 当前用户没有选中任何一项，则当前总数应该为原先的数量
        if (userIsSelect !== -1) {
          this.sumCount = this._addSumCount;
        }
        this.dataList[index].userCount += 1;
        this.dataList = this.dataList.map((dataItem) => {
          return {
            ...dataItem,
            percent: (dataItem.userCount / this.sumCount) * 100,
          };
        });
      }
      // console.log(this.dataList.map((index_) => index_.userCount), this.sumCount);
    },

    handleClick() {
      if (this.selectNum < this.choiceChooseCountMin) {
        uni.showToast({
          title: `请最少选择${this.choiceChooseCountMin}`,
        });
        return;
      }
      this.showSubmitBtn = false;
      this.disable = true;
      const result = this.dataList
        .filter((item) => item.isChecked === true)
        .map((item) => {
          return item.id;
        });
      if (getLoginStatus()) {
        http.request({
          url: "example",
          data: {},
          success: ({ data: { flag } }) => {
            if (flag) {
              uni.showToast({ title: "投票成功" });
              this.answerFlag = true;
            }
          },
        });
      } else {
        uni.navigateTo({
          url: `/pages/login/index?backUrl=${encodeURIComponent(
            getCurrentPath()
          )}`,
        });
      }
    },
  },
  mounted() {
    const {
      choiceInfoVos,
      stem,
      answerFlag,
      id,
      answerUserCount,
      choiceChooseCountMax,
      choiceChooseCountMin,
    } = this.pkQuestionInfo;
    this.isFinish = this.endFlag;
    this.sumCount = answerUserCount;
    this._sumCount = answerUserCount;
    this._addSumCount = answerUserCount + 1;
    this.stem = stem;
    this.id = id;
    this.answerFlag = answerFlag;
    this.choiceChooseCountMax = choiceChooseCountMax;
    this.choiceChooseCountMin = choiceChooseCountMin;

    this.dataList =
      this.sumCount <= 0
        ? choiceInfoVos.map((dataItem) => {
            return {
              ...dataItem,
              optionName: dataItem.content,
              percent: 0,
              isChecked: false,
              userChecked: false,
            };
          })
        : choiceInfoVos.map((dataItem) => {
            return {
              ...dataItem,
              optionName: dataItem.content,
              percent: (dataItem.userCount / this.sumCount) * 100,
              isChecked: false,
              userChecked: dataItem.selectFlag,
            };
          });

    if (answerFlag === true) {
      this.disable = true;
      this.dataList = this.dataList.map((dataItem) => {
        return {
          ...dataItem,
          optionName: dataItem.content,
          percent: (dataItem.userCount / this.sumCount) * 100,
          isChecked: dataItem.selectFlag,
          userChecked: dataItem.selectFlag,
        };
      });
    }
  },
};
</script>

<style lang="less">
.multiple-wrapper {
  width: 100%;
  background: #f8f9fb;
  border-radius: 16rpx;
  padding: 48rpx 24rpx;
  box-sizing: border-box;

  .text {
    width: 66rpx;
    height: 40rpx;
    background: #f0f3f7;
    border-radius: 8rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #3f60fc;
    margin-bottom: 16rpx;
    line-height: 40rpx;
  }

  .h3 {
    font-size: 36rpx;
    font-weight: 500;
    color: #07132b;
    margin-bottom: 34rpx;
  }

  .multiple-item {
    height: 92rpx;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    position: relative;

    .percent {
      background: #e6eaf1;
      height: 92rpx;
      line-height: 92rpx;
      border-radius: 16rpx;
      position: absolute;
      transition: all 0.5s ease-in;
    }

    .desc-box {
      display: flex;
      align-items: center;
      height: 92rpx;
      position: relative;
      padding-left: 8rpx;

      .checkbox-box {
        margin-left: 6rpx;
        display: flex;
        align-items: center;
        width: 32rpx;
        height: 32rpx;
        background: #ffffff;
        border-radius: 8rpx;
        border: 2rpx solid #d9dde2;
      }

      .box-img {
        margin-left: 6rpx;
        display: flex;
        align-items: center;

        image {
          width: 36rpx;
          height: 36rpx;
        }
      }

      .option-name {
        font-size: 28rpx;
        font-weight: 400;
        color: #07132b;
        margin-left: 16rpx;
      }

      .value {
        font-size: 28rpx;
        color: #07132b;
        position: absolute;
        right: 24rpx;
      }
    }
  }

  .select-limit {
    font-size: 24rpx;
    font-weight: 400;
    color: #ff4053;
    margin-bottom: 24rpx;
  }

  .expiration-date-multiple {
    font-size: 24rpx;
    font-weight: 400;
    color: #babcc5;
    display: flex;

    .span {
      color: #ff4053;
      margin-right: 4rpx;
    }
  }

  .sumbit-btn {
    width: 526rpx;
    height: 96rpx;
    background: #b2c0fd;
    border-radius: 48rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 96rpx;
    margin: 0 auto;
    margin-top: 88rpx;
  }
}
</style>
